<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style >
      input{
        width: 300px;
        height: 40px;
        margin: 0 auto;
      }
      .list{
        width: 300px;
        margin: 0 auto;
        
      }
      .list_one{
        margin-top: 10px;
        border-bottom: 1px solid red;
      }
  </style>
</head>
<body>
  <div id="app">
     <div style="text-align: center;">
         <input type="text"  v-model="keyword">
     </div>
      <div class="list">
        <div class="list_one" v-for="(item,index) in sugList" :key="item[1]">{{item[0]}}</div>
   
      </div>
  </div>
  <!-- cdn 版本 是别人服务器  自己的其他服务器的内容
   -->
   <script src="./vue.js"></script>
   <script src="./axios.min.js"></script>
   <!-- axios 是一个前后端交互插件
  是用pormise+原生ajax封装的插件 -->
   <script>
    new Vue({
      el:"#app",
      data(){
        return {
          keyword:"", //关键字
          sugList:[]//建议列表
        }
      },
      watch:{
        keyword(newVal,oldVal){
          axios({
            url:"https://api.oioweb.cn/api/search/taobao_suggest",
            method:"get",
            params:{ //axios get请求用params传参
              keyword:newVal
            },
            // data:{ //axios 的post请求用data传参
            //    keyword:newVal
            // },
            header:{}
          }).then(res=>{
            console.log(res)
            this.sugList=res.data.result;
          })

        }
      }
    })



   </script>

</body>
</html>